<template>
  <!-- <div class="diqu">
    <div class="top_title" :style="{ '--zoom': zoom }">
      {{ changeList.title }}<br />
      <span class="top_title_Small">更新时间：{{ changeList.update_time }}</span>
    </div>
    <el-button class="off" @click="off" :style="{ '--zoom': zoom }"> 退出 </el-button>
    <el-button class="switch" @click="pushswitch" :style="{ '--zoom': zoom }">
      下一屏
    </el-button>

    <el-button
      class="switch"
      :style="{ '--zoom': zoom }"
      :class="value ? 'switch_switch1' : 'switch_switch2'"
      @click="switchList"
    >
      {{ !this.value ? "净增量模式" : "变化量模式" }}
    </el-button>
    <el-button
      class="Fullscreen"
      @click="screen"
      icon="el-icon-full-screen"
      :style="{ '--zoom': zoom }"
    >
    </el-button>

    <el-row :gutter="20" style="height: 90vh">
      <el-col :span="6" style="height: 100%">
        <div class="left_box_t">
          <div
            style="height: 100%; width: 100%"
            id="left_box_t"
            @mousemove="HistogramMousemove1"
            @mouseleave="HistogramMouseleave1"
          ></div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明公开排名</div>
        </div>
        <div class="left_box_t">
          <div
            style="height: 100%; width: 100%"
            id="left_box_t_z"
            @mousemove="HistogramMousemove2"
            @mouseleave="HistogramMouseleave2"
          ></div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明授权排名</div>
        </div>
        <div class="left_box_t">
          <div
            style="height: 100%; width: 100%"
            id="left_box_b_z"
            @mousemove="HistogramMousemove3"
            @mouseleave="HistogramMouseleave3"
          ></div>
          <div class="left_text" :style="{ '--zoom': zoom }">实用新型授权排名</div>
        </div>
        <div class="left_box_t">
          <div
            style="height: 100%; width: 100%"
            id="left_box_b"
            @mousemove="HistogramMousemove4"
            @mouseleave="HistogramMouseleave4"
          ></div>
          <div class="left_text" :style="{ '--zoom': zoom }">外观设计授权排名</div>
        </div>
      </el-col>
      <el-col :span="11" style="height: 100%">
        <div class="zho_box_t" :style="{ '--zoom': zoom }">
          <div class="change_t">
            <el-row :gutter="11">
              <el-col :span="8">
                <div>
                  ——全区累计有效专利——<br />
                  <span class="add_change">
                    <CountTo
                      :startVal="0"
                      :endVal="changeList.valid_patent"
                      :duration="2100"
                    />
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——本月变化——<br />
                  <span class="add_change">
                    <CountTo
                      :startVal="0"
                      :endVal="changeList.month_add"
                      :duration="2100"
                    />
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——环比变化——<br />
                  <span class="add_change">
                    <span v-if="changeList.ratio_status == 0"> - </span>
                    <CountTo
                      :startVal="0"
                      :endVal="Math.abs(changeList.ratio_add)"
                      :duration="2100"
                      :decimals="1"
                    />
                    <span> % </span>
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——有效新增占比——<br />
                  <span class="add_change">
                    <CountTo
                      :startVal="0"
                      :endVal="Math.abs(changeList.have_ratio)"
                      :duration="2100"
                      :decimals="1"
                    />
                    <span> % </span>
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="border"></div>
                <div style="width: 90%">
                  ——全区商标——<br />
                  <span class="add_change">
                    <CountTo
                      :startVal="0"
                      :endVal="changeList.trademark"
                      :duration="2100"
                    />
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="change_b">
            <el-row :gutter="11">
              <el-col :span="4" v-for="(item, index) in changeList.list" :key="index">
                <div class="border" v-if="index == 'trademark'"></div>
                <div class="change_b_item">
                  <div class="item_t">
                    <span style="padding: 4px 12px 3px 12px"
                      >本月
                      <CountTo :startVal="0" :endVal="item.month_add" :duration="2100" />
                    </span>
                  </div>
                  <div class="item_z">
                    <div class="z_t">
                      <CountTo :startVal="0" :endVal="item.number" :duration="2100" />
                    </div>
                    <div class="z_b" :style="{ '--bgColor': changeBgc[index] }">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="item_b">
                    <el-row :gutter="6">
                      <el-col :span="12">
                        <div class="one_div">
                          <div>{{ item.prp_name }}</div>
                          <div class="state">
                            <div
                              :class="
                                item.prp_status == 0 ? 'span_typebot' : 'span_typeTop'
                              "
                            >
                              <CountTo
                                :startVal="0"
                                :endVal="item.prp_add"
                                :duration="2100"
                              />
                              <span style="margin-left: -4px"> % </span>
                            </div>
                            <div
                              :class="
                                item.prp_status == 0
                                  ? 'icon_bottom span_typebot'
                                  : 'span_typeTop'
                              "
                            >
                              <i class="iconfont icon-fanhuidingbu"></i>
                            </div>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="one_div one_div_r">
                          <div>{{ item.ratio_name }}</div>
                          <div class="state">
                            <div
                              :class="
                                item.ratio_status == 0 ? 'span_typebot' : 'span_typeTop'
                              "
                            >
                              <CountTo
                                :startVal="0"
                                :endVal="item.ratio_add"
                                :duration="2100"
                              />
                              <span style="margin-left: -4px"> % </span>
                            </div>
                            <div
                              :class="
                                item.ratio_status == 0
                                  ? 'icon_bottom span_typebot'
                                  : 'span_typeTop'
                              "
                            >
                              <i class="iconfont icon-fanhuidingbu"></i>
                            </div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="zho_box_b">
          <div class="zho_box_b_main" id="main"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街专利总量数据</div>
          <div class="right_tooltip" :style="{ '--zoom': zoom }">
            <div class="tooltip_title">
              <div class="title_item">排名</div>
              <div class="title_item">街道</div>
              <div class="title_item">专利总量</div>
              <div class="title_item">全区占比</div>
            </div>
            <div v-for="(item, index) in dituTooltip" :key="index">
              <div class="tooltip_text">
                <div
                  class="text_item text_ranking"
                  :class="item.ranking < 3 ? 'text_ranking1' : ''"
                >
                  {{ item.ranking < 3 ? "TOP" + item.ranking : item.ranking }}
                </div>
                <div class="text_item">{{ item.name }}</div>
                <div class="text_item text_Number">
                  <CountTo :startVal="0" :endVal="item.Number" :duration="2100" />
                </div>
                <div class="text_item text_Proportion">
                  <CountTo :startVal="0" :endVal="item.pro" :duration="2100" /><span
                    >%</span
                  >
                </div>
              </div>
              <el-divider v-if="item.pro > 10 && dituTooltip[index + 1].pro < 10"
                >全 区 平 均 占 比 线</el-divider
              >
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="height: 100%">
        <div class="right_box_t">
          <div
            style="min-height: 100%; width: 100%"
            id="right_box_t"
            @mousemove="Linemousemove"
            @mouseleave="Linemouseleave"
          ></div>
          <div class="left_text" :style="{ '--zoom': zoom }">全区专利趋势</div>
        </div>
        <div class="right_box_z">
          <div class="left_text" :style="{ '--zoom': zoom }">
            <div class="companyType">
              <div style="margin-right: 5px">企业榜单</div>
              <div class="linkBox">
                <el-dropdown
                  trigger="click"
                  @command="handleCommand"
                  v-if="companyTypeName"
                >
                  <span class="el-dropdown-link">
                    {{ companyTypeName }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" :append-to-body="false">
                    <el-dropdown-item
                      :command="item"
                      v-for="item in companyTypeArr"
                      :key="item.type"
                      >{{ item.name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="right_text">
            <span
              class="text_2"
              :style="{ '--zoom': zoom }"
              :class="status == 0 ? 'text_1' : ''"
              @click="dataList(1)"
              >累计数据</span
            >
            <span style="user-select: none" :style="{ '--zoom': zoom }">|</span>
            <span
              class="text_2"
              :style="{ '--zoom': zoom }"
              :class="status == 1 ? 'text_1' : ''"
              @click="dataList(2)"
              >上月更新</span
            >
          </div>
          <div class="box_z_item_amin">
            <div class="box_z_itemTop" :style="{ '--zoom': zoom }">
              <div>排名</div>
              <div>镇街</div>
              <div>公司</div>
              <div>数量</div>
            </div>
            <div
              class="scroll_box"
              ref="scroll_box"
              @mousemove="mousemove"
              @mouseleave="mouseleave"
              element-loading-background="#111129"
              v-loading="loading"
            >
              <div
                class="box_z_item"
                :style="{ '--zoom': zoom }"
                v-for="(item, index) in top100List"
                :key="index"
                @click="goCompany(item)"
              >
                <div>{{ item.ranking > 3 ? item.ranking : "TOP" + item.ranking }}</div>
                <div>{{ item.street }}</div>
                <div>{{ item.company }}</div>
                <div>{{ item.end }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div> -->
  <div class="" style="height: calc(100vh - 70px);">
    <iframe style="width: 100%;height: 100%" src="http://localhost:9528/#/visualization"></iframe>
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import * as echarts from "echarts";
import mapJson from "@/views/administrators/gis/shunde.json";
// import mapJson from "@/views/administrators/gis/440600_full.json";
// import mapJson from "@/views/administrators/gis/gaomin.json";
import { center, centerarea, getleftlist, getmap, companyRank } from "@/api/newuser.js";
export default {
  components: { CountTo },
  data() {
    return {
      // eslint-disable-next-line vue/no-reserved-keys
      zoom: 1,
      thezoom: null,
      thezoomType: false,
      value: false,
      type: 2,
      loading: true,
      pid: null,
      com_id: null,
      timer: null,
      rankType: 0,
      status: 0,
      fullscreen: false,
      averageType: true,
      companyTypeArr: [],
      companyTypeName: "",
      dituTooltip: [],
      Histogram1: [],
      timer1: null,
      Histogram2: [],
      timer2: null,
      Histogram3: [],
      timer3: null,
      Histogram4: [],
      timer4: null,
      Histogram5: [],
      timer5: null,
      top100List: [],
      top100List_data: [],
      dimensions1: ["product", "上月数量", "本月数量", "去年同期"],
      dimensions2: ["product", "上月数量", "本月数量"],
      dimensionsType: 1,

      Linetime: null,
      //正式
      changeList: {},
      changeBgc: {
        open: "#006CFF",
        auth: "#6ACCA3",
        news: "#EACF19",
        appear: "#7F6FEC",
        apply: "#FE7C4B",
        trademark: "#FE7C4B",
      },
      scrollDom: null,
      scrollDomTop: 0,

      myChartHistogram1: null,
      myChartHistogram2: null,
      myChartHistogram3: null,
      myChartHistogram4: null,
    };
  },
  mounted() {
    // this.pid = this.$store.state.user.pid;
    // this.com_id = this.$store.state.user.com_id;
    //监听地图点击事件
    // window.myDialog = (street_id) => {
    //   this.$router.push({
    //     path: `visualization/Patent`,
    //     query: { id: street_id },
    //   });
    // };
    // // 监听页面全屏
    // window.addEventListener("fullscreenchange", (e) => {
    //   if (screenfull.isFullscreen) {
    //     this.isFullFlag = true;
    //   } else {
    //     this.isFullFlag = false;
    //   }
    // });

    // // 监听页面滚动
    // this.scrollDom = this.$refs.scroll_box;
    // this.timer = setInterval(() => {
    //   this.scrollDomTop = this.scrollDom.scrollTop;
    //   this.scrollDom.scrollTop += 1;
    //   if (this.scrollDomTop == this.scrollDom.scrollTop) {
    //     this.scrollDom.scrollTop = 0;
    //   }
    // }, 40);
  },
  created() {
    // console.log(this.$store.state.user.pid, '我来判断有没有权限');
    // this.center();
    // this.centerarea();
    // this.companyRank();
    // this.$nextTick(() => {
    //   this.getleftlist();
    //   this.getmap();
    // });
   
  },
  methods: {
    goCompany(row) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          company_id: row.company_id,
          company_name: row.company,
        },
      });
    },
    handleCommand(command) {
      // console.log(command);
      this.top100List = [];
      this.loading = true;
      this.rankType = command.type;
      this.companyTypeName = command.name;
      this.companyRank();
    },
    companyRank() {
      companyRank({
        type: this.rankType,
        status: this.status,
      }).then((res) => {
        this.loading = false;
        this.top100List = res.list.splice(0, 30);
        // console.log(this.companyTypeArr.length, 'this.companyTypeArr.length');
        if (this.companyTypeArr.length == 0) {
          this.companyTypeArr = res.arr;
        }
        if (!this.companyTypeName) {
          this.companyTypeName = res.arr[0].name;
        }

        this.scrollDom.scrollTop = 0;
        // console.log(this.top100List);
      });
    },
    average(pro) {
      if (this.averageType) {
        if (pro < 10) {
          this.averageType = false;
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    mousemove() {
      clearInterval(this.timer);
      this.timer = null;
    },
    Linemousemove() {
      // clearInterval(this.Linetime);
      // this.Linetime = null;
    },
    Linemouseleave() {
      // this.Linetimer()
    },
    HistogramMousemove1() {
      // clearInterval(this.timer1);
      // this.timer1 = null;
    },
    HistogramMouseleave1() {
      // this.Histogramtimer1()
    },
    HistogramMousemove2() {
      // clearInterval(this.timer2);
      // this.timer2 = null;
    },
    HistogramMouseleave2() {
      // this.Histogramtimer2()
    },
    HistogramMousemove3() {
      // clearInterval(this.timer3);
      // this.timer3 = null;
    },
    HistogramMouseleave3() {
      // this.Histogramtimer3()
    },
    HistogramMousemove4() {
      // clearInterval(this.timer4);
      // this.timer4 = null;
    },
    HistogramMouseleave4() {
      // this.Histogramtimer4()
    },
    HistogramMousemove5() {
      // clearInterval(this.timer5);
      // this.timer5 = null;
    },
    HistogramMouseleave5() {
      // this.Histogramtimer5()
    },

    Histogramtimer1() {
      let myChart = echarts.init(document.getElementById("left_box_t"), "dark");
      let dimensionsType = 1;

      // this.timer1 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer2() {
      let myChart = echarts.init(document.getElementById("left_box_t_z"), "dark");
      let dimensionsType = 1;
      // this.timer2 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer3() {
      let myChart = echarts.init(document.getElementById("left_box_b_z"), "dark");
      let dimensionsType = 1;
      // this.timer3 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer4() {
      let myChart = echarts.init(document.getElementById("left_box_b"), "dark");
      let dimensionsType = 1;
      // this.timer4 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer5() {
      let myChart = echarts.init(document.getElementById("right_box_b"), "dark");
      let dimensionsType = 1;
      // this.timer5 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       dimensionsType = 1
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Linetimer() {
      let myChart = echarts.init(document.getElementById("right_box_t"), "dark");
      let type = 0;

      //折线图循环
      // this.Linetime = setInterval(() => {
      //   if (type == 0) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type = 0
      //   }
      // }, 5000)
    },
    mouseleave() {
      // this.timer = setInterval(() => {
      //   let demo1 = demo.scrollTop
      //   demo.scrollTop += 1;
      //   if (demo1 == demo.scrollTop) {
      //     demo.scrollTop = 0;
      //   }
      // }, 40);

      this.timer = setInterval(() => {
        this.scrollDomTop = this.scrollDom.scrollTop;
        this.scrollDom.scrollTop += 1;
        if (this.scrollDomTop == this.scrollDom.scrollTop) {
          this.scrollDom.scrollTop = 0;
        }
      }, 40);
    },

    dataList(type) {
      this.top100List = [];
      this.loading = true;
      this.status = type - 1;
      this.companyRank();
      // this.top100List = this.top100List_data[type - 1];
    },
    async center() {
      this.changeList = await center({ type: this.type });
      // console.log('changeList', this.changeList)
    },
    switchList() {
      this.value = !this.value;
      if (this.value) {
        this.type = 1;
      } else {
        this.type = 2;
      }
      this.changeList = {};
      this.center();
      this.getleftlist();
    },
    async centerarea() {
      this.dituTooltip = await centerarea();
    },
    async getleftlist() {
      // this.Linemousemove()
      // this.HistogramMousemove1()
      // this.HistogramMousemove2()
      // this.HistogramMousemove3()
      // this.HistogramMousemove4()
      // this.HistogramMousemove5()
      let leftList = await getleftlist({
        type: this.type,
      });
      this.Histogram1 = leftList.open;
      this.Histogram2 = leftList.auth;
      this.Histogram3 = leftList.news;
      this.Histogram4 = leftList.apper;
      this.Histogram5 = leftList.ranking;
      // this.top100List = leftList.area
      // //数组获取前四个
      // this.top100List_data = [leftList.area, leftList.area_news]

      // let X_data = leftList.dateleft_box_b
      // let series_data = leftList.trademark

      let X_data = leftList.date;
      let series_data = leftList.trademark;

      //折线图
      let Line = document.getElementById("right_box_t");
      this.Line(Line, X_data, series_data);
      let chartDom1 = document.getElementById("left_box_t");
      let chartDom2 = document.getElementById("left_box_t_z");
      let chartDom3 = document.getElementById("left_box_b_z");
      let chartDom4 = document.getElementById("left_box_b");
      // let chartDom5 = document.getElementById('right_box_b');
      let t = window.devicePixelRatio;
      let proportion = this.thezoom;
      let domList = [chartDom1, chartDom2, chartDom3, chartDom4];
      domList.forEach((item) => {
        if (proportion != 1) {
          // item.style.zoom =  1 / proportion;
          // item.style.transform = 'scale(' + proportion + ')';
          // item.style.transformOrigin = '0 0';
          // item.style.width =  proportion * 100  + '%';
        }
      });
      //柱状图
      this.$nextTick(() => {
        let myChartHistogram1 = echarts.init(chartDom1, "dark");
        let myChartHistogram2 = echarts.init(chartDom2, "dark");
        let myChartHistogram3 = echarts.init(chartDom3, "dark");
        let myChartHistogram4 = echarts.init(chartDom4, "dark");

        let option1 = this.HistogramOption(this.Histogram1, this.dimensions1);
        let option2 = this.HistogramOption(this.Histogram2, this.dimensions1);
        let option3 = this.HistogramOption(this.Histogram3, this.dimensions1);
        let option4 = this.HistogramOption(this.Histogram4, this.dimensions1);

        myChartHistogram1.setOption(option1);
        myChartHistogram2.setOption(option2);
        myChartHistogram3.setOption(option3);
        myChartHistogram4.setOption(option4);

        window.addEventListener("resize", function () {
          myChartHistogram1.resize();
          myChartHistogram2.resize();
          myChartHistogram3.resize();
          myChartHistogram4.resize();
        });

        // this.Histogram(this.myChartHistogram1, this.Histogram1, this.dimensions1, 1);

        // this.Histogram(this.myChartHistogram2, this.Histogram2, this.dimensions1, 2);

        // this.Histogram(this.myChartHistogram3, this.Histogram3, this.dimensions1, 3);

        // this.Histogram(this.myChartHistogram4, this.Histogram4, this.dimensions1, 4);

        // this.Histogram(chartDom5, this.Histogram5, this.dimensions2, 5);

        // window.onresize = this.myChartHistogram1.resize;
        // window.onresize = this.myChartHistogram2.resize;
        // window.onresize = this.myChartHistogram3.resize;
        // window.onresize = this.myChartHistogram4.resize;
      });
    },
    async getmap() {
      let data = await getmap();
      this.$nextTick(function () {
        //地图
        this.shunde(data);
        // let option =  this.shunde(data)
        // myChart.setOption(option);
      });
    },

    shunde(dataList) {
      //顺德地图配置
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("顺德区", mapJson, {}); //
      let option = {
        grid: {
          // 让图表占满容器
          top: "30px",
          left: "30px",
          right: "30px",
          bottom: "40px",
          shou: true,
        },
        //图标提示框组件
        tooltip: {
          // enterable: true,
          trigger: "item",
          // 提示框的颜色
          backgroundColor: "rgba(12, 16, 63,.7)",
          showDelay: 0,
          transitionDuration: 0.2,

          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距，
          triggerOn: "click", // 提示框触发的条件。
          enterable: true, // 是否可以通过鼠标左键拖拽改变位置。
          extraCssText: "z-index:99;", // 提示框浮层额外的css样式。
          formatter: (params) => {
            const result = params.data;
            // console.log(result)
            return `
              <div style='position: relative;width:321px;padding: 20px 13px 20px 17px;'>
                <div style='padding: 5px 7px 4px 4px;float: right;color: #FFF;background-color: #CA0010;border-radius: 5px;font-weight: bold;'>TOP${params.data.top}</div>
                <div style='font-size: 16px;color: #FFF;'>${result.name}<span onclick=myDialog('${result.street_id}') style='display: inline-block;background-color: #0ffbdc;color: #132a53;font-size: 12px;padding: 3px;margin-left: 10px;border-radius: 2px;'>点击查看详情</span></div>
                <span style='font-size: 16px;color: #47D7D8;font-weight: bold;'>专利总数：</span><span style='font-weight: bold;'>${params.data.number}</span>
                <div style='margin-top:20px;display: flex;'>
                  <div style='flex:33%;color:#fff;'>类型</div>
                  <div style='flex:33%;color:#fff;'>数量</div>
                  <div style='flex:33%;color:#fff;'>全区占比</div>
                </div>
                <div style='display: flex;color:#8656F8;'>
                  <div style='flex:33%;;'>发明公开</div>
                  <div style='flex:33%;;'>${result.type[0].number}</div>
                  <div style='flex:33%;;'>${result.type[0].proportion}</div>
                </div>
                <div style='display: flex;color:#5C87F5;'>
                  <div style='flex:33%;'>发明授权</div>
                  <div style='flex:33%;'>${result.type[1].number}</div>
                  <div style='flex:33%;'>${result.type[1].proportion}</div>
                </div>
                <div style='display: flex;color:#00ADF9;'>
                  <div style='flex:33%;'>实新授权</div>
                  <div style='flex:33%;'>${result.type[2].number}</div>
                  <div style='flex:33%;'>${result.type[2].proportion}</div>
                </div>
                <div style='display: flex;color:#00D9FC;'>
                  <div style='flex:33%;'>外观授权</div>
                  <div style='flex:33%;'>${result.type[3].number}</div>
                  <div style='flex:33%;'>${result.type[3].proportion}</div>
                </div>
              </div>
              `;
          },
        },
        series: [
          {
            name: "顺德",
            type: "map",
            mapType: "顺德区",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            aspectScale: 1.1, //地图长度比
            // center: [800, '80%'], //地图中心点
            //地图占满整个屏幕
            // layoutCenter: ['150%', '150%'],
            // layoutSize: 450,
            colorBy: "",
            itemStyle: {
              show: true,
              //颜色地区
              areaColor: "#132a53",
              emphasis: {
                // 地区选中样式
                borderWidth: 2, //边框
                borderColor: "#fff",
                areaColor: "#0b1a2c",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            label: {
              show: true,
              textStyle: {
                // 文字颜色
                color: "#67d8f3",
              },
              emphasis: {
                // 文字选中样式
                borderWidth: 0, //边框
                borderColor: "#fff",
                areaColor: "#0b1a2c",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            data: dataList,
          },
        ],
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //直接点击地图
      // myChart.on('click',  (params) => {
      //   // console.log(this)
      //   this.$router.push({
      //     path: `/visualization/Visit/`,
      //     query: { name: params.name }
      //   })
      // });
    },
    Histogram(myChart, dataList, dimensions, measures) {
      // let myChart = echarts.init(chartDom, 'dark');

      let option = {
        tooltip: {
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 10,
          },
          backgroundColor: "rgba(12, 16, 63,.7)",
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${ratio_name}：${datas[0].value.ratio_add}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${prp_name}：${datas[0].value.prp_add}</span>
                </div>
              `;
              return res;
            } else {
              let res = `
                  <span>${datas[0].value.product}</span>

                <div>
                  <span>本月数量：${datas[0].value.本月数量}</span>
                </div>
                <div>
                  <span>上月数量：${datas[0].value.上月数量}</span>
                </div>
              `;
              return res;
            }
          },
        },

        backgroundColor: "", //设置无背景色
        grid: {
          // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px",
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            上月数量: true,
            本月数量: true,
            去年同期: true,
          },
        },
        dataset: {
          dimensions: dimensions,
          source: dataList,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // console.log(value);
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width < 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {
          splitLine: {
            //不显示分割线
            show: false,
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series:
          dimensions.length == 4
            ? [
                {
                  type: "bar",
                  itemStyle: {
                    color: "#5f54f7",
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#47a9e4",
                  },
                  markLine: {
                    symbol: "none",
                    data: [
                      {
                        type: "average",
                        name: "平均值",
                        lineStyle: {
                          normal: {
                            color: "#fff",
                            width: 1,
                            type: "solid",
                          },
                        },
                        label: {
                          //自定义显示标签
                          normal: {
                            color: "#000",
                            formatter: function (params) {
                              return "";
                            },
                          },
                        },
                      },
                    ],
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#0ffbdc",
                  },
                },
              ]
            : [
                {
                  type: "bar",
                  itemStyle: {
                    color: "#6153fa",
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#49a8e6",
                  },
                  markLine: {
                    symbol: "none",
                    data: [
                      {
                        type: "average",
                        name: "平均值",
                        lineStyle: {
                          normal: {
                            color: "#fff",
                            width: 1,
                            type: "solid",
                          },
                        },
                        label: {
                          //自定义显示标签
                          normal: {
                            color: "#000",
                            formatter: function (params) {
                              return "";
                            },
                          },
                        },
                      },
                    ],
                  },
                },
              ],
      };
      option && myChart.setOption(option);
      window.onresize = myChart.resize;
      window.onresize = function () {
        myChart.resize();
      };
      let dimensionsType = 1;

      //首次开启循环
      // if (measures == 1) {
      //   this.timer1 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 2) {
      //   this.timer2 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 3) {
      //   this.timer3 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 4) {
      //   this.timer4 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 5) {
      //   this.timer5 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // }
    },
    HistogramOption(dataList, dimensions) {
      return {
        tooltip: {
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 10,
          },
          backgroundColor: "rgba(12, 16, 63,.7)",
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${ratio_name}：${datas[0].value.ratio_add}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${prp_name}：${datas[0].value.prp_add}</span>
                </div>
              `;
              return res;
            } else {
              let res = `
                  <span>${datas[0].value.product}</span>

                <div>
                  <span>本月数量：${datas[0].value.本月数量}</span>
                </div>
                <div>
                  <span>上月数量：${datas[0].value.上月数量}</span>
                </div>
              `;
              return res;
            }
          },
        },

        backgroundColor: "", //设置无背景色
        grid: {
          // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px",
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            上月数量: true,
            本月数量: true,
            去年同期: true,
          },
        },
        dataset: {
          dimensions: dimensions,
          source: dataList,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // console.log(value);
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width <= 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {
          splitLine: {
            //不显示分割线
            show: false,
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series:
          dimensions.length == 4
            ? [
                {
                  type: "bar",
                  itemStyle: {
                    color: "#5f54f7",
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#47a9e4",
                  },
                  markLine: {
                    symbol: "none",
                    data: [
                      {
                        type: "average",
                        name: "平均值",
                        lineStyle: {
                          normal: {
                            color: "#fff",
                            width: 1,
                            type: "solid",
                          },
                        },
                        label: {
                          //自定义显示标签
                          normal: {
                            color: "#000",
                            formatter: function (params) {
                              return "";
                            },
                          },
                        },
                      },
                    ],
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#0ffbdc",
                  },
                },
              ]
            : [
                {
                  type: "bar",
                  itemStyle: {
                    color: "#6153fa",
                  },
                },
                {
                  type: "bar",
                  itemStyle: {
                    color: "#49a8e6",
                  },
                  markLine: {
                    symbol: "none",
                    data: [
                      {
                        type: "average",
                        name: "平均值",
                        lineStyle: {
                          normal: {
                            color: "#fff",
                            width: 1,
                            type: "solid",
                          },
                        },
                        label: {
                          //自定义显示标签
                          normal: {
                            color: "#000",
                            formatter: function (params) {
                              return "";
                            },
                          },
                        },
                      },
                    ],
                  },
                },
              ],
      };
    },

    Line(chartDom, X_data, series_data) {
      let myChart = echarts.init(chartDom, "dark");
      let option = {
        backgroundColor: "", //设置无背景色
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["发明公开", "发明授权", "实新授权", "外观授权"],
        },
        grid: {
          top: "60px",
          left: "30px",
          right: "30px",
          bottom: "20px",
          containLabel: true,
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            发明公开: true,
            发明授权: true,
            实新授权: true,
            外观授权: true,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: X_data,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //不显示坐标轴文字
            // show: false
          },
          splitLine: {
            //不显示分割线
            show: false,
          },
        },
        series: [
          {
            name: "发明公开",
            type: "line",
            stack: "Total",
            data: series_data[0].data,
            itemStyle: {
              color: "#5ba1d4",
            },
          },
          {
            name: "发明授权",
            type: "line",
            stack: "Total",
            data: series_data[1].data,
            itemStyle: {
              color: "#35ead3",
            },
          },
          {
            name: "实新授权",
            type: "line",
            stack: "Total",
            data: series_data[2].data,
            itemStyle: {
              color: "#e5c86f",
            },
          },
          {
            name: "外观授权",
            type: "line",
            stack: "Total",
            data: series_data[3].data,
            itemStyle: {
              color: "#605ad6",
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      let type = 0;

      //首次开启折线图定时器
      // this.Linetime = setInterval(() => {
      //   if (type == 0) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type = 0
      //   }
      // }, 5000)
    },
    pushswitch() {
      this.$router.push({
        path: "/visualization/Visit",
      });
    },
    pushome() {
      this.$router.push({
        path: "/visualization",
      });
    },
    off() {
      this.$router.push({
        path: "/newhome",
      });
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
  //组件销毁时清除定时器
  beforeDestroy() {
    this.mousemove();
    // this.Linemousemove()
    // this.HistogramMousemove1()
    // this.HistogramMousemove2()
    // this.HistogramMousemove3()
    // this.HistogramMousemove4()
    // this.HistogramMousemove5()
  },
};
</script>

<style scoped lang="less">
@import url("../../../styles/el-popper.css");

.el-dropdown-menu {
  background-color: #0e1941;
  border: #0e1941 solid 1px;

  min-width: 120px;
  position: absolute !important;
  top: 20px !important;
  left: -45px !important;

  .el-dropdown-menu__item {
    color: #4995f4 !important;
  }

  .el-dropdown-menu__item:hover {
    color: #68d8fe !important;
    background-color: #28293f !important;
  }
}

.switch {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 100px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0e1b47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.switch_switch1 {
  right: 200px;
  background-color: #0f1b47;
}

.switch_switch2 {
  right: 200px;
  background-color: #22dbdb;
  color: #0f1b47;
  border: 1px solid #0f1b47;
}

.Fullscreen {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0e1b47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.return {
  color: #fff;
  position: absolute;
  top: 65px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0e1b47;
  border: 1px solid #67d7fd;
  margin-left: 0;
}

.off {
  color: #fff;
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0e1b47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.diqu {
  position: relative;
  // min-width: 1920px;
  overflow: hidden;
  min-height: 100vh;
  background: #111129;
  padding: 0 28px;

  .top_title {
    padding-top: 1%;
    color: #fff;
    font-size: 36px;
    text-align: center;
    width: 100%;
    height: 8vh;
    background: url(../../../assets/web/top_k.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    line-height: 76%;
    zoom: var(--zoom);

    .top_title_Small {
      font-size: 14px;
      font-weight: initial;
    }
  }

  .left_box_t {
    position: relative;
    width: 100%;
    // min-height: 224px;
    height: 23%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;

    .left_text {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .zho_box_t {
    width: 100%;
    height: 36%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    padding: 26px 24px 28px 24px;
    color: #fff;
    zoom: var(--zoom);

    .change_t {
      height: 33%;

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .border {
            width: 10px;
            height: 100%;
            background-image: linear-gradient(to right, #0c317f, #10122b);
            margin: 0 5px 0 0;
          }

          div {
            width: 100%;
            font-size: 11px;
            text-align: center;
            height: 100%;
            background-color: #0f1b47;
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: initial;

            .add_change {
              font-weight: bold;
              font-size: 33px;
              color: #28fefe;
              display: flex;
              justify-content: center;
              flex-wrap: nowrap;
            }
          }

          &:last-child {
            display: flex;
            background-color: #111129;
            padding: 0 0px 0 0 !important;
          }
        }
      }
    }

    .change_b {
      height: 66%;

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .border {
            width: 10px;
            height: calc(100% + 11px);
            //高度100%加11px

            background-image: linear-gradient(to right, #0c317f, #10122b);
            margin: 0 5px 0 0;
          }

          .change_b_item {
            width: 100%;
            margin-top: 11px;
            font-size: 11px;
            text-align: center;
            height: 100%;
            background-color: #0f1b47;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            line-height: initial;

            .item_t {
              span {
                background-color: #1b3182;
                border-radius: 5px;
                color: #28fefe;
                font-size: 10px;
                display: inline-block;
              }
            }

            .item_z {
              .z_t {
                font-size: 22px;
              }

              .z_b {
                font-size: 13px;
                color: #59a3ff;
                position: relative;
              }

              .z_b::before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 12px;
                border-radius: 3px;
                background-color: var(--bgColor);
                margin-right: 5px;
                vertical-align: middle;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-35px, -50%);
              }
            }

            .item_b {
              .el-row {
                padding: 0 5px;

                .el-col {
                  .one_div {
                    background-color: #1b3182;
                    color: #52ffff;
                    border-radius: 5px;
                    padding: 8px 2px;
                    font-size: 10px;
                    width: 100%;

                    .state {
                      display: flex;
                      justify-content: center;

                      i {
                        font-weight: bold;
                        font-size: 10px;
                      }

                      .span_typeTop {
                        color: #ff4439;
                      }

                      .span_typebot {
                        color: #40ffaf;
                      }
                    }
                  }

                  .one_div_r {
                    width: 98%;
                  }
                }
              }
            }
          }
        }

        .el-col:last-child {
          display: flex;
          // background-color: #111129;
          padding: 0 0px 0 0 !important;
        }
      }
    }
  }

  .zho_box_b {
    width: 100%;
    min-height: 59%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    position: relative;

    .zho_box_b_main {
      width: 80%;
      height: 120%;
      position: absolute;
      top: -40px;
      left: -30px;
    }

    .left_text {
      position: absolute;
      top: 30px;
      left: 30px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }

    .right_tooltip {
      width: 40%;
      height: 80%;
      background: rgba(14, 27, 71, 0.8);
      position: absolute;
      top: 60px;
      right: 30px;
      color: #fff;
      padding: 11px 10px 30px 10px;
      font-size: 14px;
      zoom: var(--zoom);

      .tooltip_title {
        display: flex;
        margin-bottom: 20px;

        .title_item {
          display: inline-block;
          flex: 25%;
          text-align: center;
        }
      }

      .tooltip_text {
        display: flex;
        padding: 4px 0;

        .text_item {
          display: inline-block;
          flex: 25%;
          text-align: center;
          margin: 1% 0;
        }

        .text_ranking {
          color: #00adf9;
        }

        .text_ranking1 {
          color: #f1433a !important;
        }

        .text_Number {
          color: #00d9fc;
        }

        .text_Proportion {
          color: #5c87f5;
        }
      }

      ::v-deep .el-divider {
        position: initial;
        background-color: #fff;

        .el-divider__text {
          background-color: #0e1b47;
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }

  .right_box_t {
    width: 100%;
    height: 23%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .right_box_z {
    width: 100%;
    height: 72%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;
    color: #fff;
    // padding: 60px 22px;
    padding: 10% 5% 5% 5%;

    .companyType {
      display: flex;

      .linkBox {
        position: relative;

        .el-dropdown-link {
          color: #4995f4 !important;
          border: #4995f4 1px solid;
          display: inline-block;
          padding: 3px 5px;
          border-radius: 4px;
          font-size: 14px;

          .el-popper {
            position: absolute;
            left: 0;
            top: 24px;
            width: 100px;
            z-index: 999999;
            font-size: 14px;
            line-height: 24px;
            background-color: #0e1941;
            color: #4995f4;
            cursor: pointer;
            transform: scale(0);
            transform-origin: 0 0;
            transition: all 0.2s;

            .el-popper-item {
              padding: 5px;
            }

            .el-popper-item:hover {
              color: #68d8fe !important;
              background-color: #28293f !important;
            }

            .el-popper-item-active {
              color: #68d8fe !important;
              background-color: #28293f !important;
            }
          }
        }

        .el-dropdown-link:hover {
          .el-popper {
            transform: scale(1);
          }
        }
      }
    }

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      zoom: var(--zoom);
    }

    .right_text {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 20px;

      .text_1 {
        color: #68d8fe !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        color: #4995f4;
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    .box_z_item_amin {
      overflow: hidden;
      height: 100%;

      .scroll_box {
        height: 93%;
        overflow: scroll;
        width: 105%;
        overflow-x: auto;
      }

      .box_z_item {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4b98f7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }

        .span_typebot {
          color: #00d9fc;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }

        .span_typeTop {
          color: #ff4439;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }
      }

      .box_z_itemTop {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4b98f7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }
      }
    }

    .box_z_item:hover {
      color: #68d8fe !important;
      background-color: #28293f !important;
    }
  }

  .right_box_b {
    width: 100%;
    height: 30%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }
}

.quanx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111129;
  z-index: 999;
}

.icon_bottom {
  display: inline-block;
  transform: rotate(180deg);
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
